<template>
	<view>
		<image :src='itemDetail.sptpcflj'></image>
		<view class="introduce">
			<view class="spmc item">{{itemDetail.spmc}}</view>
			<view class="spxq item">{{itemDetail.spxq}}</view>
			<view class="sppf item">评分：
				<text>{{itemDetail.sppf}}</text>
				<u-rate v-model="value" :count="count" 
				:active-color="activeColor" :inaction-color="inactiveColor"
				:active-icon="activeIcon" :inactive-icon="inactiveIcon"
				:disabled="disabled" :colors="colors" :icons="icons"></u-rate>
			</view>
			<view class="price item">￥
				<text>{{itemDetail.spdj}}</text>元
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				itemDetail:null,
				//评分u-rate
				activeColor: '#ffc454',
				inactiveColor: '#b2b2b2',
				disabled: false,
				count: 5,
				customIcon: false,
				plain: false,
				// value: 1,
				colors: [],
				icons: []
			}
		},
		computed: {
			activeIcon() {
				let icon = this.customIcon ? 'heart' : 'star';
				return this.plain ? icon : icon + '-fill'
			},
			inactiveIcon() {
				let icon = this.customIcon ? 'heart' : 'star';
				return this.plain ? icon : icon + '-fill'
			},
			value(){
				if(this.itemDetail.sppf+'' === 'null'){
					return 0
				}else{
					return Math.round(this.itemDetail.sppf) 
				}
			}
		},
		onLoad(option) {
			console.log('option',option)
			// JSON.parse(option.detail)
			this.itemDetail = option
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}
	image{
		width: 100%;
	}
	
	.introduce{
		display: flex;
		flex-direction: column;
		padding: 10rpx 20rpx;
		color: $font-color-base;
		background-color: #fff;
		.item{
			margin-top: 16rpx;
		}
		.spmc{
			font-size: $font-lg;
			color: $font-color-dark;
			font-weight: bold;
		}
		.sppf{
			color: $font-color-light;
			text{
				color: $font-color-dark;
				margin-right: 50rpx;
			}
			
		}
		.price{
			color: $font-color-light;
			text{
				color: $font-color-dark;
				font-size: $font-lg + 4upx;
				margin: 0 10rpx;
			}
		}
	}
</style>
